<template>
  <div>
    <input type="checkbox" v-model="hasHead" id="hasHead">
    <label for="hasHead">hasHead</label>
    <hr>
    <DemoUseSlotsComponent>
      <template #head v-if="hasHead">
          <h3>自定义head插槽内容</h3>
      </template>
      <template #body>
        自定义body插槽内容
      </template>
    </DemoUseSlotsComponent>
  </div>
</template>

<script>
import DemoUseSlotsComponent from "./demo-use-slots-component"
export default {
  data(){
    return {
      hasHead:true
    }
  },
  components:{
    DemoUseSlotsComponent
  }
}
</script>

<style lang="scss">

@include theme{
  .demo-use-slots{
      &-head{
        color:#fff;
        background-color: $colorPrimary;
      }
      &-body{
        color: #fff;
        background-color: $colorError;
      }
  }  
}
</style>